<template>
  <div id="addActivity">
    <el-upload
      style="position: relative"
      :action="uploadUrl"
      :on-success="uploadSuccess"
      list-type="picture-card"
      :show-file-list="false"
    >
      <i class="el-icon-plus"></i>
      <img class="uplImg" :src="bannerPath" />
    </el-upload>
    <el-form ref="form" :model="formData" label-width="120px">
      <el-form-item
        v-for="item in formList"
        :key="item.label"
        :label="item.label"
        :prop="item.prop"
      >
        <el-input v-if="item.input" v-model="formData[item.prop]"></el-input>
        <el-input
          placeholder="请输入活动描述"
          rows="3"
          v-if="item.textarea"
          type="textarea"
          v-model="formData[item.prop]"
        ></el-input>
        <template v-else-if="item.btninput">
          <span style="margin-left:-30px;margin-right:45px">{{formData[item.prop]}}</span>
          <el-button type="text" @click="clickInput">{{item.value}}</el-button>
        </template>
        <el-select
          @change="selectChange"
          placeholder="请选择"
          style="width:100%"
          v-else-if="item.select"
          v-model="formData[item.prop]"
        >
          <el-option
            v-for="option in item.options"
            :key="option.typeId"
            :label="option.title"
            :value="option.typeId"
          ></el-option>
        </el-select>
        <el-date-picker
          v-else-if="item.date"
          style="width: 100%"
          v-model="formData[item.prop]"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div v-if="parentmode == 'add'">
      <span>活动日程</span>
      <ul class="activitylist">
        <li v-for="(item, index) in aclist" :key="index">
          <span>{{index}}</span>
          <el-date-picker v-model="item.onDate" type="date" placeholder="选择日期"></el-date-picker>
          <span>于</span>
          <el-input v-model="item.location" placeholder="请输入地点"></el-input>
          <span>举行</span>
          <el-input v-model="item.operation" placeholder="请输入事件"></el-input>
          <i @click="delRow(index)" style="line-height: 40px;" class="el-icon-close"></i>
        </li>
        <li>
          <span></span>
          <el-date-picker v-model="add.onDate" type="date" placeholder="选择日期"></el-date-picker>
          <span>于</span>
          <el-input v-model="add.location" placeholder="请输入地点"></el-input>
          <span>举行</span>
          <el-input v-model="add.operation" placeholder="请输入事件"></el-input>
          <span class="addday" @click="addAcDay">增加日程</span>
        </li>
      </ul>
    </div>
    <div class="btns">
      <el-button v-if="parentmode == 'add'" type="primary" @click="submitPost">提交</el-button>
      <el-button v-else type="primary" @click="submitPostEdit">提交修改</el-button>
      <el-button type="primary" @click="goback">取消</el-button>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      formData: {
        title: "",
        typeName: "",
        signUpDate: "",
        startDate: "",
        endDate: "",
        location: "",
        estNumber: "",
        principal: "",
        phone: "",
        eventDesc: ""
      },
      formList: [
        { label: "活动主题", prop: "title", input: true },
        { label: "活动类型", prop: "typeName", select: true, options: [] },
        { label: "报名开始", prop: "signUpDate", date: true },
        { label: "举办时间", prop: "startDate", date: true },
        { label: "结束日期", prop: "endDate", date: true },
        { label: "活动地点", prop: "location", input: true },
        { label: "预计规模", prop: "estNumber", input: true },
        { label: "负责人", prop: "principal", input: true },
        { label: "负责人手机号", prop: "phone", input: true },
        { label: "活动描述", prop: "eventDesc", textarea: true }
      ],
      aclist: [],
      add: {
        onDate: "",
        location: "",
        operation: ""
      },
      uploadUrl: this.$uploadUrl,
      bannerPath:
        "http://finance-obj.oss-cn-zhangjiakou.aliyuncs.com/company/1561358815419a55.png",
      typeId: "",
      typeName: "",
      parentmode: this.$route.query.mode
    };
  },
  mounted() {
    this.getTypes();
    if (this.parentmode == "edit") {
      this.getDetail();
    }
  },
  methods: {
    uploadSuccess(file) {
      let data = file.data;
      this.bannerPath = data.fileUrl;
    },
    getDetail() {
      let param = {
        id: this.$route.query.id
      };
      this.$api.adiViewActivityDetail(param, res => {
        this.formData = res.data;
        this.bannerPath = this.formData.bannerPath;
        this.typeName = this.formData.typeName;
        this.typeId = this.formData.typeId;
        this.formData.typeName = this.formData.typeId;
      });
    },
    submitPostEdit() {
      let param = Object.assign(this.formData);
      param.bannerPath = this.bannerPath;
      param.typeId = this.typeId;
      param.typeName = this.typeName;
      this.$api.apiEditActivityDetail(param, res => {
        this.$message({
          type: "success",
          message: "修改成功"
        });
        this.$router.go(-1);
      });
    },
    submitPost() {
      console.log(this.formData);
      for (let key in this.formData) {
        if (
          this.formData[key] == undefined ||
          this.formData[key] == "" ||
          this.bannerPath == ""
        ) {
          this.$message({
            type: "warning",
            message: "请完善活动信息"
          });
          return;
        }
      }
      let para = Object.assign(this.formData);
      para.bannerPath = this.bannerPath;
      para.typeId = this.typeId;
      let actemp = JSON.parse(JSON.stringify(this.aclist));
      actemp.forEach(item => {
        item = JSON.stringify(item);
      });
      let param = {
        eventBaseInfo: para,
        eventScheduleList: actemp
      };
      let { onDate, location, operation } = this.add;
      if (onDate == "" && location == "" && operation == "") {
        this.$api.apiAddActivity(param, res => {
        this.$message({
            type: "success",
            message: "添加成功"
        });
        this.$router.go(-1);
        });
      }else if (onDate == "" || location == "" || operation == "") {
        console.log("111");
        this.$message({
          type: "warning",
          message: "请完善日程信息"
        });
        return;
      } else {
        this.addAcDay().then(() => {
          param.eventScheduleList= JSON.parse(JSON.stringify(this.aclist));
          this.$api.apiAddActivity(param, res => {
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.$router.go(-1);
          });
        });
      }
    },
    getTypes() {
      // 活动类型
      let param = {
        page: this.currentPage
      };
      this.$api.viewActivityList(param, res => {
        this.formList[1].options = res.data;
      });
    },
    selectChange(val) {
      this.typeId = val;
    },
    async addAcDay() {
        let { onDate, location, operation } = this.add;
        // 不直接赋值， 会造成引用冲突
        if (onDate == "" || location == "" || operation == "") {
          this.$message({
            type: "warning",
            message: "请完善日程信息"
          });
        } else {
          this.aclist.push({
            onDate: onDate,
            location: location,
            operation: operation
          });
          this.add.onDate = "";
          this.add.location = "";
          this.add.operation = "";
        }
    },
    delRow(index) {
      this.aclist.splice(index, 1);
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss">
#addActivity {
  width: 64%;
  margin: 30px auto;
  .el-upload--picture-card {
    width: 80%;
    height: 200px;
    display: block;
    margin: 0 auto 20px;
    line-height: 200px;
  }
  .uplImg {
    position: absolute;
    top: 0;
    left: 10%;
    height: 200px;
    object-fit: cover;
    width: 80%;
  }
  .activitylist {
    list-style-type: none;
    li {
      display: flex;
      line-height: 40px;
      margin-top: 20px;
      * {
        margin-right: 30px;
      }
      .el-input {
        width: 22%;
      }
      .el-date-editor.el-input__inner {
        width: auto;
      }
      .el-input__icon {
        height: auto;
      }
      .el-icon-close:hover {
        color: #3a8ee6;
        animation: rotateC 0.5s;
        cursor: pointer;
      }

      @keyframes rotateC {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(90deg);
        }
      }
    }
  }
  .addday {
    color: #3a8ee6;
    font-size: 14px;
  }
  .addday:hover {
    cursor: pointer;
  }
  .btns {
    text-align: center;
    margin-top: 50px;
  }
}
</style>
